<template>
  <div v-if="visible" class="floating-panel">
    <span class="close-btn" role="button" aria-label="关闭" tabindex="0" @click="handleCancel" @keydown.enter="handleCancel">×</span>
    <div class="floating-panel__header">材料</div>
    <div class="floating-panel__body">
      <!-- 表单开始 -->
      <el-form ref="formRef" :model="form" label-width="100px" class="material-form" size="small">
        <el-form-item label="类型">
          <el-radio-group v-model="form.type" @change="handleTypeChange">
            <el-radio :label="'solid'">固体</el-radio>
            <el-radio :label="'liquid'">流体</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 固体 Tabs -->
        <el-tabs v-if="form.type==='solid'" v-model="activeTab" type="border-card" class="material-tabs">
          <el-tab-pane label="线弹性" name="linearElasticity">
            <el-form-item label="弹性模量(E)">
              <el-input-number v-model="form.linearElasticity.modulus" :min="0" :step="1" />
            </el-form-item>
            <el-form-item label="泊松比(ν)">
              <el-input-number v-model="form.linearElasticity.poisson" :min="0" :max="0.5" :step="0.01" />
            </el-form-item>
            <el-form-item label="剪切模量(G)">
              <el-input-number v-model="form.linearElasticity.shear" :min="0" :step="1" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="塑性" name="plasticity">
            <el-form-item label="屈服强度">
              <el-input-number v-model="form.plasticity.yieldStrength" :min="0" :step="1" />
            </el-form-item>
            <el-form-item label="硬化系数">
              <el-input-number v-model="form.plasticity.hardening" :min="0" :step="0.01" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="通用" name="general">
            <el-form-item label="密度">
              <el-input-number v-model="form.general.density" :min="0" :step="0.01" />
            </el-form-item>
            <el-form-item label="阻尼比">
              <el-input-number v-model="form.general.damping" :min="0" :max="1" :step="0.01" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="热力学系数" name="thermodynamics">
            <el-form-item label="导热系数">
              <el-input-number v-model="form.thermodynamics.thermalConductivity" :min="0" :step="0.01" />
            </el-form-item>
            <el-form-item label="比热">
              <el-input-number v-model="form.thermodynamics.specificHeat" :min="0" :step="0.01" />
            </el-form-item>
            <el-form-item label="膨胀系数">
              <el-input-number v-model="form.thermodynamics.expansion" :min="0" :step="0.000001" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <!-- 流体 Tab -->
        <el-tabs v-else v-model="activeTab" type="border-card" class="material-tabs">
          <el-tab-pane label="属性" name="properties">
            <el-form-item label="密度">
              <el-input-number v-model="form.properties.density" :min="0" :step="0.01" />
            </el-form-item>
            <el-form-item label="粘度">
              <el-input-number v-model="form.properties.viscosity" :min="0" :step="0.0001" />
            </el-form-item>
            <el-form-item label="体膨胀系数">
              <el-input-number v-model="form.properties.bulkExpansion" :min="0" :step="0.000001" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <div class="form-actions">
          <el-button type="primary" size="small" @click="handleConfirm">确认</el-button>
        </div>
      </el-form>
      <!-- 表单结束 -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import type { ProjectTreeNode } from '@/store/modules/tree'
import { usePropertyForm } from '../composables/usePropertyForm'

// 父级树节点 & 项目 id
const props = defineProps<{ node?: ProjectTreeNode | null; projectId?: number | string | null }>()
// emit: 新增 confirm 事件，update 在深度 watch 中触发
const emit = defineEmits<{ (e:'cancel'):void; (e:'type-change', v: string):void; (e:'update', v:any):void; (e:'confirm'):void }>()

const visible = ref(true)
function handleCancel(){ visible.value=false; emit('cancel') }
function handleKey(e:KeyboardEvent){ if(e.key==='Escape'&&visible.value){ handleCancel() } }
onMounted(()=>window.addEventListener('keydown',handleKey))
onBeforeUnmount(()=>window.removeEventListener('keydown',handleKey))

// 表单对象：根据材料类型封装不同子对象
const form = reactive({
  type: 'solid' as 'solid' | 'liquid',
  linearElasticity: { modulus: 0, poisson: 0.3, shear: 0 },
  plasticity: { yieldStrength: 0, hardening: 0 },
  general: { density: 0, damping: 0 },
  thermodynamics: { thermalConductivity: 0, specificHeat: 0, expansion: 0 },
  properties: { density: 0, viscosity: 0, bulkExpansion: 0 }
})

// 回填由 usePropertyForm 内部处理（namespace: 'material'）

const activeTab = ref(form.type==='solid' ? 'linearElasticity' : 'properties')

function handleTypeChange(){
  emit('type-change', form.type)
  // 切换类型时重置 activeTab 到首个
  activeTab.value = form.type==='solid' ? 'linearElasticity' : 'properties'
}

const wrapperEmit = (e:'confirm'|'cancel') => { if(e==='confirm') { emit('update', form); emit('confirm') } }
const { formRef, handleConfirm } = usePropertyForm(form, { node: props.node, projectId: props.projectId, persist: false, namespace: 'material' }, wrapperEmit)
</script>
<style scoped lang="scss">
@use './common.scss' as *;
.material-form { padding:4px 0; }
.material-tabs { margin-top: 4px; }
.form-actions { display:flex; justify-content:flex-end; margin-top:8px; }
</style>